import React, { Component } from 'react'
import {
  StyleSheet,
  TextInput,
  Keyboard,
  LayoutAnimation,
  findNodeHandle
} from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, IS_IOS, HEIGHT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import { RNTUtils } from 'src/bridge/index'

export default class TextInputCustom extends Component {
  static propTypes = {
    val: PropTypes.string,
    inputRefFunc: PropTypes.func,
    handleSend: PropTypes.func,
    hideInputContainer: PropTypes.func,
    valChanged: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      textVal: props.val,
      keyboardHeight: 0
    }
  }

  static defaultProps = {
    val: ''
  }

  componentDidMount () {
    this.keyboardShowListener = Keyboard.addListener(
      IS_IOS ? 'keyboardWillShow' : 'keyboardDidShow',
      this._keyboardDidShow.bind(this)
    )
    this.keyboardHideListener = Keyboard.addListener(
      IS_IOS ? 'keyboardWillHide' : 'keyboardDidHide',
      this._keyboardDidHide.bind(this)
    )
    // const tag = findNodeHandle(this.inputRef)
    // RNTUtils.setTextFiledByTag(tag)
    // this.inputRef
  }

  componentWillUnmount () {
    this.keyboardShowListener.remove()
    this.keyboardHideListener.remove()
  }

  _keyboardDidShow (e) {
    this.layoutAnimation()
    this.setState({
      keyboardHeight: e.endCoordinates.height
    })
  }

  _keyboardDidHide (e) {
    this.layoutAnimation()
    this.setState({
      keyboardHeight: 0
    })
  }

  layoutAnimation = () => {
    // 动画
    IS_IOS && LayoutAnimation.configureNext({
      duration: 220,
      create: {
        type: LayoutAnimation.Types.linear,
        property: LayoutAnimation.Properties.opacity
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut
      }
    })
  }

  render () {
    const { hideInputContainer, valChanged } = this.props
    const { textVal, keyboardHeight } = this.state
    return (
      <CustomButton style={[styles.bottomLine, { paddingBottom: keyboardHeight + ScaleS(15) }]} onPress={hideInputContainer}>
        <TextInput
          ref={this._inputRefFunc}
          placeholder={'我想问一问...'}
          style={styles.inputStyle}
          onChangeText={(textVal) => {
            this.setState({
              textVal
            })
            valChanged(textVal)
          }}
          onBlur={this._onBlur}
          value={textVal}
          maxLength={500}
          returnKeyType="send"
          onSubmitEditing={this._handleSend}
        />
      </CustomButton>
    )
  }

  _inputRefFunc = ref => {
    this.inputRef = ref
    this.props.inputRefFunc(ref)
  }

  _onBlur = () => {
    this.props.hideInputContainer()
  }

  _handleSend = () => {
    this.props.handleSend()
  }
}
const styles = StyleSheet.create({
  bottomLine: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: HEIGHT,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    paddingBottom: ScaleS(15),
    backgroundColor: 'rgba(0,0,0,0.6)',
    paddingHorizontal: ScaleS(20)
  },
  inputStyle: {
    width: '100%',
    height: ScaleS(40),
    backgroundColor: '#fff',
    paddingHorizontal: ScaleS(15),
    borderRadius: ScaleS(20)
  }
})
